<route lang="json5" type="tab">
{
  layout: 'theme', // 使用主题
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="min-h-screen flex flex-col bg-[#F3F5F7] pb-20 box-border">
    <!-- 顶部搜索栏 -->
    <view class="px-30rpx py-20rpx bg-white sticky top-0 z-10">
      <wd-search placeholder="搜索商品" />
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="flex-1">
      <!-- 活动横幅 -->
      <view class="p-20rpx">
        <view class="rounded-12rpx overflow-hidden">
          <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="h-300rpx">
            <swiper-item>
              <wd-img
                src="/static/images/shop/active-top-bg.png"
                width="100%"
                height="300rpx"
                @click="goToActivity(1)"
              />
            </swiper-item>
            <swiper-item>
              <wd-img
                src="/static/images/shop/active-top-bg.png"
                width="100%"
                height="300rpx"
                @click="goToActivity(2)"
              />
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 活动分类 -->
      <view class="p-20rpx bg-white mt-20rpx mx-20rpx rounded-12rpx">
        <shop-title title="热门活动" />
        <view class="grid grid-cols-2 gap-20rpx mt-30rpx">
          <view class="relative" @click="goToActivity(1)">
            <wd-img src="/static/images/shop/active-1.png" width="100%" height="180rpx" />
            <view class="absolute bottom-20rpx left-20rpx text-white text-28rpx font-bold">人气爆款</view>
          </view>
          <view class="relative" @click="goToActivity(2)">
            <wd-img src="/static/images/shop/active-2.png" width="100%" height="180rpx" />
            <view class="absolute bottom-20rpx left-20rpx text-white text-28rpx font-bold">黄金专场</view>
          </view>
        </view>
      </view>

      <!-- 商品推荐 -->
      <view class="p-20rpx bg-white mt-20rpx mx-20rpx rounded-12rpx">
        <shop-title title="商品推荐" />
        <view class="grid grid-cols-2 gap-20rpx mt-30rpx">
          <goods-item v-for="item in goodsList" :key="item.id" :goods="item" @click="handleGoodsClick(item)" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
// 如果需要手动导入组件，可以使用以下方式
// import GoodsItem from '@/components/goods-item.vue'
// import ShopTitle from '@/components/shop-title.vue'

// 商品列表数据
const goodsList = ref([
  {
    id: 1,
    image: '/static/images/home/goods-1.png',
    title: '热血运动手表运动版',
    price: '99.00',
    sold: '1000+'
  },
  {
    id: 2,
    image: '/static/images/home/goods-1.png',
    title: '精品护肤水',
    price: '199.00',
    sold: '880+'
  },
  {
    id: 3,
    image: '/static/images/home/goods-1.png',
    title: '高档智能手机',
    price: '5999.00',
    sold: '760+'
  },
  {
    id: 4,
    image: '/static/images/home/goods-1.png',
    title: '智能家居套装',
    price: '399.00',
    sold: '650+'
  }
])

// 处理商品点击
const handleGoodsClick = (goods: any) => {
  uni.showToast({
    title: `点击了商品: ${goods.title}`,
    icon: 'none'
  })
  // 实际应用中跳转到商品详情页
  // uni.navigateTo({
  //   url: `/pages/shop/detail?id=${goods.id}`
  // })
}

// 跳转到活动页面
const goToActivity = (type: number) => {
  uni.navigateTo({
    url: `/pages/shop/activity?type=${type}`
  })
}
</script>

<style lang="scss" scoped>
// 商城页面样式
</style>
